<template>
  <div id="fu">
    <div id="desc">
      <i class="el-icon-search"></i>
      <span>课程查询</span>
    </div>

    <div class="contine">
      <table width="100%">
        <thead>
        <tr>
          <th>时间</th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
          <th>周六</th>
          <th>周日</th>
        </tr>
        </thead>
        <tbody>
        <!--遍历出表格中的所有的数据-->
        <tr v-for="(r, i) in tableRowData">
          <td>{{ getLesson(i) }}</td>
          <td v-for="c in r">
            {{ c.courseName }}
            <div class="fontCss">
              {{ c.teacherName }} <br>
              {{ c.courseLocation }}
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

  </div>
</template>

<script>
import {get} from "../../common/request";

export default {
  name: "CourseTable",
  data() {
    return {
      tableRowData: []
    }
  },
  methods: {
    //展示每一行的开头部分
    getLesson(num) {
      switch (num) {
        case 0:
          return "第一节";
        case 1:
          return "第二节";
        case 2:
          return "第三节";
        case 3:
          return "第四节";
        case 4:
          return "第五节";
        case 5:
          return "第六节";
        case 6:
          return "第七节";
        case 7:
          return "第八节";
        case 8:
          return "第九节";
        case 9:
          return "第十节";
      }
    },
    //将返回的数据放入创建的表格中
    createTable() {
      for (let i = 0; i < 10; i++) {
        let row = [];
        for (let j = 0; j < 7; j++) {
          row[j] = {
            courseName: "",
            teacherName: "",
            courseLocation: ""
          }
        }
        this.tableRowData[i] = row;
      }
    },
    getTime(time) {
      // 0: {courseTime: '2-3-2', courseName: '数据库实用技术', courseLocation: 'C区202', teacherName: '张三'}
      // 1: {courseTime: '5-5-3', courseName: 'ASP.Net开发', courseLocation: 'E区315', teacherName: '张三'}
      // 2: {courseTime: '3-1-2', courseName: '数据库概论', courseLocation: 'C区106', teacherName: '宋老师'}
      let day = time.courseTime.split("-")[0];
      let start = time.courseTime.split("-")[1];
      let count = time.courseTime.split("-")[2];
      //遍历 count 次，得到共有的课程数
      for (let i = 0; i < count; i++) {
        this.tableRowData[start - 1 + i][day - 1] = {
          courseName: time.courseName,
          teacherName: time.teacherName,
          courseLocation: time.courseLocation
        }
      }
    },
    getData() {
      this.createTable();
      get("/course/getCourseTable").then(x => {
        //console.log(x.data)
        let time = x.data;
        for (let i = 0; i < time.length; i++) {
          this.getTime(time[i]);
        }
        this.$forceUpdate();
      })
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>
#fu {
  padding: 0 15px;
  background-color: rgb(240, 240, 240);
}

#desc {
  font-size: 14px;
  padding: 15px 0;
}

.contine {
  background-color: white;
  border-radius: 3px;
  border: 1px solid lightgray;
  padding: 10px 30px;
}

tr > th {
  background-color: rgb(103, 161, 255);
  color: white;
  font-weight: 400;
  font-size: 12px;
  padding: 3px 0 3px 0;
}

tr > td {
  text-align: center;
  height: 60px;
  background-color: rgb(234, 242, 255);
}

td {
  width: 12.5%;
}

.fontCss {
  font-size: 12px;
  color: #677998;
}
</style>
